<template>
  <div>
    <div class="center">
      <el-dialog
        title="编辑区域"
        :visible.sync="dialogVisible"
        width="50%"
        :before-close="handleClose"
      >
        <el-form ref="form" :model="area" :rules="rules" inline>
          <el-row>
            <el-form-item label="分组状态:" prop="isShow">
              <el-radio v-model="area.isShow" :label="true">显示</el-radio>
              <el-radio v-model="area.isShow" :label="false">隐藏</el-radio>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="分组名称:" prop="areaName">
              <el-input v-model="area.areaName"></el-input>
            </el-form-item>
          </el-row>

          <el-row v-show="area.parentAreaCode !== null">
            <el-form-item label="选择一级分组:" prop="parentAreaCode">
              <el-select v-model="area.parentAreaCode" placeholder="请选择">
                <el-option
                  v-for="(area, index) in firstAreaList"
                  :label="area.areaName"
                  :value="area.areaCode"
                  :key="index"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-row>

          <el-row v-show="area.parentAreaCode !== null">
            <el-form-item label="二级分组图片:">
              <el-upload
                class="upload-demo"
                action="https://api.xstarlife.com/systemapp/upload/singleFileUpload"
                :on-success="handleSuccess"
                :on-remove="handleRemove"
                :headers="{ uploadScene: 'avatar' }"
                :limit="1"
                :file-list="fileList"
                list-type="picture"
              >
                <el-button
                  size="small"
                  style="background-color:#fd804c;color: #fff;"
                  >点击上传</el-button
                >
                <div slot="tip" class="el-upload__tip">
                  只能上传jpg/png文件，且不超过500kb
                </div>
              </el-upload>
            </el-form-item>
          </el-row>
        </el-form>

        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button
            style="background-color:#fd804c;color: #fff;"
            @click="confirm"
            >修 改</el-button
          >
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  inject: ["reload"],
  data() {
    return {
      dialogVisible: false,
      firstAreaList: [],
      area: {
        areaCode: "",
        areaName: "",
        isShow: "",
        parentAreaCode: "",
        iconUrl: ""
      },
      rules: {
        isShow: [
          { required: true, message: "请选是否展示", trigger: "change" }
        ],
        areaName: [
          { required: true, message: "请输入分组名称", trigger: "blur" },
          { max: 5, message: "长度在5个字符内", trigger: "blur" }
        ],
        parentAreaCode: [
          { required: true, message: "请选择一级分组", trigger: "change" }
        ]
      }
    };
  },
  methods: {
    init(areaCode) {
      this.getServiceAreaByAreaCode(areaCode);
      this.getFirstServiceAreaList();
      this.dialogVisible = true;
    },
    async getServiceAreaByAreaCode(areaCode) {
      const { data } = await this.$http.get(
        `hssgoodsadmin/serviceAreaInfo/getServiceAreaByAreaCode?areaCode=${areaCode}`
      );
      this.area = data;
    },
    async getFirstServiceAreaList() {
      const { data } = await this.$http.get(
        "hssgoodsadmin/serviceAreaInfo/getFirstServiceAreaList"
      );
      this.firstAreaList = data;
    },
    handleClose(done) {
      done();
    },
    handleRemove() {
      this.area.iconUrl = "";
    },
    handleSuccess({ data }) {
      this.area.iconUrl = data;
    },
    confirm() {
      if (this.area.parentAreaCode === null) {
        this.$refs["form"].validateField("areaName", errorMsg => {
          if (!errorMsg) {
            this.$http.post(
              "hssgoodsadmin/serviceAreaInfo/updateServiceAreaInfo",
              this.area
            );
            this.$emit("func");
            this.reload();
            this.dialogVisible = false;
            this.$message.success("修改成功");
          }
        });
      } else {
        this.$refs["form"].validate(valid => {
          if (valid) {
            this.$http.post(
              "hssgoodsadmin/serviceAreaInfo/updateServiceAreaInfo",
              this.area
            );
            this.$emit("func");
            this.reload();
            this.dialogVisible = false;
            this.$message.success("修改成功");
          }
        });
      }
    }
  },
  computed: {
    fileList() {
      let url = this.area.iconUrl;
      return [
        {
          name: "",
          url: url
        }
      ];
    }
  }
};
</script>

<style scoped></style>
